<template>
  <div class="container">
    <van-card v-for="(item,index) in desks" v-bind:key="index"
              :desc="item.desc"
              :title="item.title"
              :thumb="item.thumb"
    >
      <view slot="num">
        <text>当前点餐人数: {{item.num}}</text>
      </view>

      <view slot="footer">
        <van-button size="normal" type="info" @click="sitDown(item._id,item.num,item.password)"> 坐下</van-button>
      </view>
    </van-card>
    <van-dialog id="dialog-create" use-slot>
      <van-field
        @input="bingPassword"
        :value="password"
        type="password"
        label="密码"
        placeholder="请设定该桌子的密码"
        required
        border="false"
      />
    </van-dialog>
    <van-dialog id="dialog-enter" use-slot>
      <van-field
        @input="bingPassword"
        :value="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
        required
        border="false"
      />
    </van-dialog>
    <van-toast id="van-toast"/>
  </div>
</template>

<script>
  /*
  *
  * 0 空闲状态    1  就餐状态  2禁用状态
  * 用户点进入桌子状态1   管理员不同意返回0   管理员同意改为2
  *
  * */
  import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
  import Dialog from '../../../static/vant/dialog/Dialog';
  import Toast from '../../../static/vant//toast/Toast';
  //    "van-dialog": "../../../static/vant/dialog/index"
  export default {
    data() {
      return {
        desks: [],
        password: null
      }
    },
    mounted() {
      this.init();
    },
    computed: {
      ...mapState(['desk']),
      ...mapGetters(['getDesk']),
    },
    methods: {
      ...mapMutations(['setDesk']),
      //密码双向绑定
      bingPassword(e) {
        this.password = e.mp.detail
      },
      //获得所有可以开放的桌子
      init() {
        const db = wx.cloud.database({env: 'jkoala-98c74'});
        db.collection('desks').where({
          state: db.command.in([0, 1])
        }).get().then(
          res => {
            console.log("初始化函数获得桌子的数据");
            console.log(res.data);
            this.desks = res.data;
          }
        )
      },
      /*
      * 用户坐下
      *     判断人数是否为0  如果为0 需要提示它设置密码  更新人数
      *     如果不为0   让它输入密码
      *
      * */
      sitDown(id, num, password) {
        console.log("sitDown")
        const db = wx.cloud.database({env: 'jkoala-98c74'});
        if (num === 0) {
          Dialog.confirm({
            // context:'#message',
            selector: "#dialog-create",
            title: '设定桌子密码',
          })
            .then(() => {
              //用户确认设定为就餐状态  更新人数
              console.log("设定桌子密码为" + this.password);
              //修改桌子为点餐状态
              db.collection('desks').doc(id).update({
                data: {
                  num: num + 1,
                  state: 1,
                  password: this.password
                }
              }).then(res => {
                console.log("res:")
                console.log(res)
              })
              //将桌子的信息存入当前vuex
              console.log("存入桌子id" + id)
              this.setDesk(id);
            })
            .catch(() => {
              // on cancel
              console.log(this.password)
              // console.log("cancel")
              // db.collection('desks').doc(id)
              //   .get().then(res=>{
              //   console.log(res);
              // })
            })
          this.$forceUpdate();
        } else {
          Toast("多人点餐 有点复杂 我还没开发出来");
          //如果人数不等于0
          // 需要输入密码才能进入
        /*  Dialog.confirm({
            selector: "#dialog-enter",
            title: '输入该桌子的密码',
          })
            .then(() => {
              //用户确认设定为就餐状态  更新人数
              console.log("更新桌子的人数");
              db.collection('desks').doc(id).get().then(
                res =>  {
                  //如果密码相等 人数+1  跳转到 点单
                  if (this.password === res.data.password) {
                    //密码相等更新桌子的人数
                    db.collection("desks").doc(id).update({
                      data: {
                        num: num + 1
                      }
                    });
                    //将桌子的值赋值进vuex
                    this.setDesk(id);
                    //跳转
                    wx.switchTab({
                      url: "../category/main"
                    })
                  } else {
                    //密码错误
                    Toast.fail("密码错误");
                  }
                }
              )
            })
            .catch(() => {
              console.log("cancel")
              console.log(this.password)
            })
          this.$forceUpdate();*/
        }
      }
    }
  }

</script>

<style>
  .pay-image {

  }

  .van-image {
    margin: 10px auto;
  }
</style>
